<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="../build/react.js"></script>
    <script  src="../build/react-dom.js"></script>
    <script  src="../build/browser.min.js"></script>
</head>
<body>
<div  id="div1"></div>
<script type="text/babel">
 class LoginBasicComp extends  React.Component {

        constructor(props) {
            super(props);
            this.state = {
                inputCheck:false,
            };
        };
     handleBlur (event) {
     if(event.target.value==""||event.target.value==null){
         this.setState({inputCheck:true});
     }else{
         this.setState({inputCheck:false});
     }
   };
        render(){
            return (
                    <div>
                        <input placeholder={this.props.plh}  value={this.props.iptValue}  type={this.props.iptType} onFocus={this.props.handleFocus}   onChange ={this.props.handleChange} onBlur={this.handleBlur}  name={this.props.iptName}  />{this.props.desc}<br/>
                        {
                            this.state.inputCheck?
                                    <div>{this.props.logonCheck}</div> :<div style={{display:"none"}}>{this.props.logonCheck}</div>
                        }
                    </div>
            )
        }
 }
    class LonginQQ extends React.Component {
        static defaultProps = {
            title: 'QQ登录',
        };
        constructor(props) {
            super(props);
            this.state = {
                tips:false,
                accName:'',
                pwd:'',
            };
        };
        handleFocus(event){
        let iptName = event.target.name;
        if (iptName == "accName") {
            this.setState({accName: ''});
        }else if(iptName == "pwd"){
            this.setState({pwd: ''});
        }
    };
        handleChange(event) {
        console.log(124);
        let iptName = event.target.name;
        if (iptName == "accName") {
            this.setState({accName: event.target.value});
        }else if(iptName == "pwd"){
            this.setState({pwd: event.target.value});
        }
    };
        validateLogon () {
        var userName = this.state.accName;
        console.log(userName);
        var pwd = this.state.pwd;
        if (!(userName == "" || userName == null)) {
            if (userName !== "839470083") {
                this.setState({tips: true});
            } else {
                this.setState({tips: false});
            }
        }
    };
        render() {
            return (
                    <div>
                        <h1>{this.props.title}</h1>
                        <BasicInput  iptType="text" iptValue={this.state.accName}   plh="QQ账号"  iptName="accName" handleFocus={this.handleFocus} handleChange={this.handleChange}   desc="注册账号"  logonCheck="请您输入账号后再登录"   />
                        <BasicInput  iptType="text"  iptValue={this.state.pwd}     plh="密码"  iptName="pwd" handleFocus={this.handleFocus}  handleChange={this.handleChange}    desc="找回密码"  logonCheck="请您输入密码后再登录"   />
                        <input  type="button" onClick={this.validateLogon} value="登录" />
                        {
                            this.state.tips ?
                                    <div>您输入的账号不存在，请重新确认后输入</div> :<div style={{display:"none"}}>您输入的账号不存在，请重新确认后输入</div>
                        }

                    </div>
            )
        }
    }
    ReactDOM.render(<LonginQQ />, document.getElementById("div1"));
</script>
</body>
</html>